import { defineComponent, watchEffect, ref } from 'vue'
import type { PropType } from 'vue'
import type { formItemState } from '@/types/baseConfig'
import { NSwitch, NInput, NButton, NSelect } from 'naive-ui'
import formItem from '@/basic/addEdit/formItem'
export default defineComponent({
  props: {
    modelValue: {
      type: Object as PropType<formItemState>,
      default: () => {
        return {}
      }
    }
  },
  emits: ['update:modelValue', 'setting'],
  setup: function (props, { emit }) {
    const info = ref<formItemState>(formItem)
    watchEffect(() => {
      if (props.modelValue) {
        info.value = props.modelValue
      }
    })

    const setNull = (
      e:
        | 'labelAlign'
        | 'labelPlacement'
        | 'labelWidth'
        | 'showRequireMark'
        | 'requireMarkPlacement'
        | 'size'
    ) => {
      info.value[e] = null
      setTimeout(() => {
        delete info.value[e]
      }, 80)
    }
    /**
     *  变化回调
     * */
    let timer: any = null
    const handOptions = () => {
      if (timer) {
        clearTimeout(timer)
        timer = null
      }
      timer = setTimeout(() => {
        clearTimeout(timer)
        timer = null
        emit('update:modelValue', info.value)
      }, 450)
    }

    /**
     *  下拉框值
     * */
    const labelAlignOptions = [
      {
        label: 'left',
        value: 'left'
      },
      {
        label: 'right',
        value: 'right'
      }
    ]
    const labelPlacementOptions = [
      {
        label: 'left',
        value: 'left'
      },
      {
        label: 'top',
        value: 'top'
      }
    ]
    const requireMarkPlacementOptions = [
      {
        label: 'left',
        value: 'left'
      },
      {
        label: 'right',
        value: 'right'
      },
      {
        label: 'right-hanging',
        value: 'right-hanging'
      }
    ]
    const sizeOptions = [
      {
        label: 'small',
        value: 'small'
      },
      {
        label: 'medium',
        value: 'medium'
      },
      {
        label: 'large',
        value: 'large'
      }
    ]
    return () => (
      <>
        <div class="flex items-center">
          <div class="settingItemTitle">是否只展示首个出错信息</div>
          <div class="ml-[10px]">
            <NSwitch v-model:value={info.value.first} onUpdateValue={handOptions} />
          </div>
        </div>
        <div class="mt-5 flex items-center">
          <div class="settingItemTitle">是否展示校验反馈</div>
          <div class="ml-[10px]">
            <NSwitch v-model:value={info.value.showFeedback} onUpdateValue={handOptions} />
          </div>
        </div>
        <div class="mt-5 flex items-center">
          <div class="settingItemTitle">是否展示标签</div>
          <div class="ml-[10px]">
            <NSwitch v-model:value={info.value.showLabel} onUpdateValue={handOptions} />
          </div>
        </div>
        <div class="mt-5 flex items-center">
          <div class="settingItemTitle">是否展示必填的星号</div>
          <div class="ml-[10px] flex items-center">
            <NButton
              size="small"
              type={info.value.showRequireMark === undefined ? 'primary' : 'default'}
              onClick={() => setNull('showRequireMark')}
            >
              <span>空</span>
            </NButton>
            <NSwitch
              class="ml-[10px]"
              v-model:value={info.value.showRequireMark}
              onUpdateValue={handOptions}
            />
          </div>
        </div>
        <div class="mt-5 flex items-center">
          <div class="settingItemTitle">必填的星号的位置</div>
          <div class="ml-[10px] flex-1 flex items-center">
            <NButton
              size="small"
              type={info.value.requireMarkPlacement === undefined ? 'primary' : 'default'}
              onClick={() => setNull('requireMarkPlacement')}
            >
              <span>空</span>
            </NButton>
            <NSelect
              class="ml-[10px]"
              v-model:value={info.value.requireMarkPlacement}
              options={requireMarkPlacementOptions}
              placeholder="请选择"
              onUpdateValue={handOptions}
            />
          </div>
        </div>
        <div class="mt-5 flex items-center">
          <div class="settingItemTitle">labelWidth</div>
          <div class="ml-[10px] flex items-center">
            <NButton
              size="small"
              type={info.value.labelWidth === undefined ? 'primary' : 'default'}
              onClick={() => setNull('labelWidth')}
            >
              <span>空</span>
            </NButton>
            <NInput
              class="ml-[10px]"
              v-model:value={info.value.labelWidth}
              placeholder="auto | number | string"
              clearable
              onBlur={handOptions}
            />
          </div>
        </div>
        <div class="mt-5 flex items-center">
          <div class="settingItemTitle">标签的文本对齐方式</div>
          <div class="ml-[10px] flex-1 flex items-center">
            <NButton
              size="small"
              type={info.value.labelAlign === undefined ? 'primary' : 'default'}
              onClick={() => setNull('labelAlign')}
            >
              <span>空</span>
            </NButton>
            <NSelect
              class="ml-[10px]"
              v-model:value={info.value.labelAlign}
              options={labelAlignOptions}
              placeholder="请选择"
              onUpdateValue={handOptions}
            />
          </div>
        </div>
        <div class="mt-5 flex items-center">
          <div class="settingItemTitle">label-placement</div>
          <div class="ml-[10px] flex-1 flex items-center">
            <NButton
              size="small"
              type={info.value.labelPlacement === undefined ? 'primary' : 'default'}
              onClick={() => setNull('labelPlacement')}
            >
              <span>空</span>
            </NButton>
            <NSelect
              class="ml-[10px]"
              v-model:value={info.value.labelPlacement}
              options={labelPlacementOptions}
              placeholder="请选择"
              onUpdateValue={handOptions}
            />
          </div>
        </div>
        <div class="mt-5 flex items-center">
          <div class="settingItemTitle">尺寸</div>
          <div class="ml-[10px] flex-1 flex items-center">
            <NButton
              size="small"
              type={info.value.size === undefined ? 'primary' : 'default'}
              onClick={() => setNull('size')}
            >
              <span>空</span>
            </NButton>
            <NSelect
              class="flex-1 ml-[10px]"
              v-model:value={info.value.size}
              options={sizeOptions}
              placeholder="请选择"
              onUpdateValue={handOptions}
            />
          </div>
        </div>
        <div class="mt-5 flex items-center">
          <div class="settingItemTitle">
            通常 path 的改变会导致数据来源的变化，所以 naive-ui
            会清空验证信息。如果不期望这个行为，可以将其置为 true
          </div>
          <div class="ml-[10px]">
            <NSwitch v-model:value={info.value.ignorePathChange} onUpdateValue={handOptions} />
          </div>
        </div>
        <div class="mt-5 flex items-center">
          <div class="settingItemTitle">标签的样式</div>
          <div class="ml-[10px]">
            <NButton round size="small" onClick={() => emit('setting', 'formItem.labelStyle')}>
              去设置
            </NButton>
          </div>
        </div>
        <div class="mt-5 flex items-center">
          <div class="settingItemTitle">表项的反馈信息</div>
          <div class="ml-[10px]">
            <NButton round size="small" onClick={() => emit('setting', 'formItem.feedback')}>
              去设置
            </NButton>
          </div>
        </div>
        <div class="mt-5 flex items-center">
          <div class="settingItemTitle">表单的验证状态</div>
          <div class="ml-[10px]">
            <NButton
              round
              size="small"
              onClick={() => emit('setting', 'formItem.validationStatus')}
            >
              去设置
            </NButton>
          </div>
        </div>
      </>
    )
  }
})
